<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        th,td{
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }
        th{
            background-color: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-if="books.length > 0">
            <h1>图书购物车</h1>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>加入时间</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books" :key="item.id">
                        <td>{{ index + 1 }}</td>
                        <!-- <td v-for="val in item">
                            {{ val }}
                        </td> -->
                        <!-- 对象是可以循环出来的，但是不推荐，这样写增加我们的代码逻辑难度 -->
                        <td>{{ item.name }}</td>
                        <td>{{ item.time }}</td>
                        <td>{{ item.price | newPrice }}</td>
                        <td>
                            <button @click="reduce(index)" :disabled="item.count <= 1">-</button>
                            {{ item.count }}
                            <button @click="add(index)">+</button>
                        </td>
                        <td>
                            <button @click="delBook(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>总价格 {{ allPrice | newPrice }} </div>
        </div>
        <div v-else>购物车为空</div>
    </div>
    <!-- 购物车 -->
    <!-- 思路 -->
    <!-- 首先写静态 -->
    <!-- 先判断购物车里面是否有书 有书显示购物车 没有显示购物车为空 -->
    <!-- 再定义一个复杂数组类型 -->
    <!-- 循环数组展示 -->
    <!-- 写过滤器 -->
    <!-- 写加减数量 最少为1 如果减到负数了是不是意味着你买个东西，商家还要给你钱 -->
    <!-- 写移除事件 splice(第几个，删除几个) -->
    <!-- 计算属性(计算一下我们的总价格) 总价格(单价 * 数量) -->
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    books:[
                        {
                            id:1,
                            name:'西游记',
                            time:'2022-5',
                            price:102,
                            count:1
                        },
                        {
                            id:2,
                            name:'水浒传',
                            time:'2022-5',
                            price:105,
                            count:1
                        },
                        {
                            id:3,
                            name:'三国演义',
                            time:'2022-5',
                            price:108,
                            count:1
                        },
                        {
                            id:4,
                            name:'红楼梦',
                            time:'2022-5',
                            price:112,
                            count:1
                        },
                    ]
                }
            },
            // 写函数的地方
            methods:{
                reduce(i){
                    if(this.books[i].count > 1){
                        this.books[i].count--
                    }
                },
                add(i){
                    this.books[i].count++
                },
                delBook(i){
                    this.books.splice(i,1)
                }
            },
            // 写过滤器的地方
            filters:{
                newPrice(val){
                    return '¥' + val.toFixed(2)
                }
            },
            // 写计算属性的地方
            computed:{
                allPrice(){
                    let totalPrice = 0
                    for(let i = 0 ; i < this.books.length ; i++){
                        totalPrice += this.books[i].price * this.books[i].count
                    }
                    return totalPrice
                }
            }
        })
    </script>
</body>
</html>